<template>
    <div class="login">
        <van-nav-bar
                title="登录"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"></van-nav-bar>
        <div class="logo-box">
            <van-image
                    class="logo"
                    width="6rem"
                    height="6rem"
                    :src="logo"
            />
        </div>
        <van-form @submit="onSubmit">
            <van-field
                    v-model="account"
                    name="account"
                    label="账号"
                    placeholder="用户名或邮箱.."
                    error-message-align="right"
                    :clearable="true"
                    :rules="[{ required: true, message: '账号必须' }]"
            />
            <van-field
                    v-model="password"
                    type="password"
                    name="password"
                    label="密码"
                    placeholder="密码"
                    error-message-align="right"
                    :clearable="true"
                    :rules="[
                    { required: true, message: '密码必须' },
                    { validator:checkPassword, message: '密码必须由 4-16位字母、数字组成.' }
                    ]"
            />
            <div class="submit-btn">
                <van-button round block type="info" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
        <div class="logo-tips">
            密码忘记了？
            <router-link :to="{name:'Register',params:{type:2}}"><span class="a-text">找回密码</span></router-link>
            <br/>
            我是新用户？
            <router-link :to="{name:'Register',params:{type:1}}"><span class="a-text">前往注册</span></router-link>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {
        Form
        , NavBar
        , Image as VanImage
        , Field
        , Toast
    } from 'vant';

    // 缓存索引 - 最近输入帐号
    const RIT = 'RecentInputAccount';
    Vue.use(Form)
        .use(NavBar)
        .use(VanImage)
        .use(Field)
        .use(Toast);

    export default {
        name: "login",
        data() {
            return {
                logo: require("@/assets/logo.png"),
                account: '',
                password: '',
            };
        },
        mounted() {
            this.$store.commit("setPlayerStatus", false);
            this.$store.commit("setTabbarStatus", false);
            // 填充帐号
            var userInfo = JSON.parse(localStorage.getItem("userInfo"));
            if (userInfo && userInfo.email !== "undefined") {
                this.account = userInfo.email;
            } else {
                this.account = localStorage.getItem(RIT) || "";
            }
        },
        methods: {
            // 返回
            onClickLeft() {
                this.$store.commit("setTabbarStatus", true);
                this.$router.push('/my');
            },
            // 密码合法验证
            checkPassword(password) {
                return !!password.match(/^[\w]{4,12}$/);
            },
            onSubmit(posts) {
                // 记录最新输入
                localStorage.setItem("RecentInputAccount", posts.account);
                // axios 发送post请求时默认数据为 Request Payload
                // 并非我们常用的 Form Data 格式
                var that = this;
                var qs = require('qs');
                var params = qs.stringify(posts);
                this.$http.post("/account/login", params)
                    .then(function (response) {
                        var rs = response.data;
                        if (rs.code === 1) {
                            // 设置缓存
                            localStorage.setItem("userInfo", JSON.stringify(rs.data.user_info));

                            // 延时跳转
                            const toast = Toast.loading({
                                duration: 0, // 持续展示 toast
                                forbidClick: true,
                                message: '登录成功! \n正在跳转 3 秒',
                            });
                            let second = 3;
                            const timer = setInterval(() => {
                                second--;
                                if (second) {
                                    toast.message = `登录成功! \n正在跳转 ${second} 秒`;
                                } else {
                                    clearInterval(timer);
                                    // 手动清除 Toast
                                    Toast.clear();
                                    that.$router.push('/my');
                                }
                            }, 1000);
                        } else {
                            // 失败提示
                            Toast.fail(rs.msg);
                        }

                    });
            },
        }
    }
</script>

<style scoped>
    /**flex布局**/
    .logo-box {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 30px;
    }

    .logo-tips {
        text-align: center;
        color: #7e8c8d;
    }

    .a-text {
        color: #00ccff;
        text-decoration: underline;
        font-style: oblique;
        line-height: 35px;
    }

    .submit-btn{
        margin: 20px 0;
    }
</style>